<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- vue3模板 -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js">
        /* 处理复杂的业务逻辑，经常使用方法、计算属性、监听器
    methods：方法
            它们是挂载在vue对象上的函数，通常用于做事件处理函数，或者封装自定义函数
    computed：计算属性
            可以计算某个属性的值，还可以调用data中的数据进行操作
    watch：监听器
            如果在数据发生改变时，还要求作出相应的改变，就可以使用监听器
    注意事项：
            计算属性是根据依赖关系进行缓存的计算，并且只在需要的时候进行更新 */
    </script>
</head>
<body>
    <!-- vue挂在容器 可以认为是vue根组件 -->
    <div id="app">
        <p>原数据：{{msg}}</p>>
        <p>新数据：{{reversMsg}}</p>
    </div>
    <script>
        //创建vue实例
        Vue.createApp({
           data(){
            return {
                msg:'helloworld!'
            }
           },
           computed:{
            reversMsg(){
                return this.msg.split('').reverse().join('')
            }
           }
        }).mount("#app")
    </script>
</body>
</html>
